<template>
  <div class="page-card article-page">
    <h-query :showKey="['title']" @search="search">
      <!-- <h-tooltip slot="btn" title="报错" /> -->
      <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添加文章监控</a-button>
    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false">
      <span slot="link" slot-scope="{text}">
        <a :href="text" target="_blank">{{ text }}</a>
      </span>
      <div slot="imgUrl" slot-scope="{text}">
        <div v-if="text" style="text-align: center">
          <img

            :src="text"
            alt=""
            width="100px"
            height="100px"
            style="object-fit: cover" />
        </div>
        <div v-else style="width: 100px;margin:0 auto;text-align:center;font-size: 18px;color: #1F3A88;">
          <img :src="require('@/assets/Image/img-load.png')" width="100%" alt="">
          <p>暂无数据...</p>
        </div>
      </div>
      <div slot="videoUrl" slot-scope="{text, record}">
        <div v-if="text && record.videoStatus == 0" style="text-align: center">
          <video
            controls

            :src="text"
            alt=""
            width="140px"
            height="100px"
            style="object-fit: cover" />
        </div>
        <div v-else-if="record.videoStatus == null" style="width: 120px;margin:0 auto;text-align:center;font-size: 18px;color: #1F3A88;">
          <img :src="require('@/assets/Image/video-load.png')" width="100%" alt="">
          <p>数据采集中...</p>
        </div>
        <div v-else style="width: 100px;text-align:center;margin:0 auto;font-size: 18px;color: #1F3A88;">
          <img :src="require('@/assets/Image/video-load.png')" width="100%" alt="">
          <p>视频不支持采集...</p>
        </div>
      </div>
      <span slot="isDelete" slot-scope="{text, record}">
        <a-tag v-if="record.isDelete != null" :color="status[record.isDelete].color">{{ status[record.isDelete].label }}</a-tag>
      </span>
      <span slot="action" slot-scope="{record}">
        <a class="red" @click="remove(record)" v-if="record.status != 1 && record.isDelete != -1">取消监控</a>
      </span>
    </h-table>

    <createAddress ref="createSafe" v-model="show" @submit="submit" />
  </div>
</template>
<script>
import { articleList, updateMonitor } from '@/api/serve';
import createAddress from './action/createAddress';

export default {
  components: {
    createAddress
  },
  data() {
    return {
      show: false,
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '文章标题',
            dataIndex: 'title',
            width: 400
          },
          {
            align: 'center',
            title: '缩略图',
            dataIndex: 'imgUrl',
            width: 200,
            scopedSlots: { customRender: 'imgUrl' }
          },
          {
            align: 'center',
            title: '视频地址',
            dataIndex: 'videoUrl',
            width: 200,
            scopedSlots: { customRender: 'videoUrl' }
          },
          {
            align: 'center',
            title: '文章链接',
            dataIndex: 'link',
            scopedSlots: { customRender: 'link' }
          },
          {
            align: 'center',
            title: '时间',
            dataIndex: 'reaseTime'
          },
          {
            align: 'center',
            title: '点击数',
            dataIndex: 'readNum'
          },
          {
            align: 'center',
            title: '转发数',
            dataIndex: 'transNum'
          },
          {
            align: 'center',
            title: '评论数',
            dataIndex: 'commentNum'
          },
          {
            align: 'center',
            title: '状态',
            dataIndex: 'isDelete',
            scopedSlots: { customRender: 'isDelete' }
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: 100
          }
        ],
        pagination: {
          total: 100
        }
      },
      form: {

      },
      selectedRowKeys: [],
      selectedRow: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      status: {
        '-1': {
          label: '已删除',
          color: '#999'
        },
        0: {
          label: '待删除',
          color: 'blue'
        }
      }
    };
  },
  methods: {
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      articleList(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.filter(e => e);
        this.config.pagination.total = res.data.total;
        console.log(this.config.dataSource, 'res.data.records');
      });
    },
    changeStatus({ id, status }) {
      this.$message.success(status ? '发布成功' : '下线成功');
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        content: '确定要取消监控吗？',
        onOk() {
          updateMonitor({ id, status: 1 }).then(res => {
            that.$message.success('取消监控成功');
            that.$refs.htable.refresh(true);
          });
        }
      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    submit() {
      this.$refs.htable.refresh();
    },
    add() {
      this.show = true;
      this.$refs.createSafe.add();
    }
  }
};
</script>
<style lang="less" scoped>
.article-page {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
